<template>
  <div class="content">
    <a-dropdown :trigger="['contextmenu']" v-for="item in list" :key="item.id">
      <div class="item">
        <div class="x-ico" @click="gotoDetails(item)">
          <a-image
            :preview="false"
            :placeholder="false"
            :width="50"
            :height="50"
            :src="item.ico"
            :fallback="fallback"
            class="x-iconn-img"
            style="border-radius: 8px"
          />
        </div>
        <a-tooltip placement="bottom">
          <template #title>
            <span>{{ item.name }}</span>
          </template>
          <div class="x-name">{{ item.name }}</div>
        </a-tooltip>
      </div>
      <!-- 右键 -->
      <template #overlay>
        <a-menu style="width: 80px">
          <a-menu-item @click="oCollection(item)"> 收藏站点 </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import { EllipsisOutlined } from "@ant-design/icons-vue";
import { getItem, setItem, keys } from "@/utils/localStorage";
import { message } from "ant-design-vue";
import { getApply } from "@/utils/localStorage";

interface SideApp {
  id: string;
  url: string;
  ico: string;
  name: string;
  type?: string;
  isRecommend?: string;
}

export default defineComponent({
  name: "SideAppList",
  components: {},
  props: {},
  data() {
    const list: Array<SideApp> = [];

    return {
      list,
      fallback:
        "",
    };
  },
  created() {
    this.onSideNav("-1");
  },
  beforeUnmount() {
    //
  },
  computed: {
    //
  },
  methods: {
    // 跳转详情
    gotoDetails(obj: SideApp) {
      if (obj.url) {
        window.open(obj.url || "");
      }
    },
    // 收藏
    oCollection(item: SideApp) {
      let list = getItem(keys.MyApplocat);
      if (!list) {
        list = [];
      }
      for (let r of list) {
        if (r.url == item.url) {
          message.success("已收藏");
          return;
        }
      }
      list.unshift(item);
      setItem(keys.MyApplocat, list);
      this.$emit("editMyApp");
      message.success("收藏成功");
    },

    // 分类点击
    onSideNav(id: string) {
      getApply(id).then((res: Array<SideApp>) => {
        this.list = res;
      });
    },
  },
});
</script>

<style scoped lang="less">
.content {
  .x-buttom {
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 100;
    color: white;
    font-size: 26px;
    background-color: red;
    color: red;
  }

  /*被拖拽对象的样式*/
  .item {
    cursor: pointer;
    float: left;
    margin: 5px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 5px;
    position: relative;

    width: 80px;
    height: 85px;

    .x-name {
      width: 60px;
      margin-top: 2px;

      font-size: 13px;
      font-weight: normal;
      color: white;
      text-align: center;

      /*1. 先强制一行内显示文本*/
      white-space: nowrap;
      /*2. 超出的部分隐藏*/
      overflow: hidden;
      /*3. 文字用省略号替代超出的部分*/
      text-overflow: ellipsis;
    }

    .x-ico {
      background-color: white;
      border-radius: 8px;

      .x-iconn-img {
        border-radius: 8px;
      }
    }
  }

  .item:hover {
    background-color: rgba(232, 232, 233, 0.2);
  }
  /*选中样式*/
  .chosen {
    border: solid 2px #3089dc !important;
  }
}
</style>
